<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4729176_sdqzv2ofd8.css">
    <link rel="stylesheet" href="./css/public.css">
     <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4726344_q62nn233y3d.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4793074_hum4yfybgfg.css">
</head>
<body>
    <div id="videoList" class="w100p">
    <!-- 动态内容由 JS 渲染 -->
</div>


    <footer>
        <a class="item" href="index.html">
            <i class="iconfont icon-dianying"></i>
            <span>电影</span>
        </a>
        <a class="item" href="cinema.html">
            <i class="iconfont icon-yingyuan"></i>
            <span>影院</span>
        </a>
        <a class="item" href="video.html">
            <i class="iconfont icon-shipin"></i>
            <span>视频</span>
        </a>
        <a class="item" href="my.html">
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </a>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 设置底部导航栏的 active 状态
document.querySelectorAll('footer .item').forEach(item => {
        item.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止默认跳转
            document.querySelectorAll('footer .item').forEach(el => {
                el.classList.remove('active');
            });
            this.classList.add('active');

            // 动态跳转到目标页面
            const href = this.getAttribute('href');
            window.location.href = href;
        });
    });

    // 页面加载时设置底部导航栏的 active 状态
    document.addEventListener('DOMContentLoaded', () => {
        const currentPage = window.location.pathname.split('/').pop();
        document.querySelectorAll('footer .item').forEach(item => {
            const href = item.getAttribute('href');
            if (href === currentPage) {
                item.classList.add('active');
            }
        });
    });
    </script>
    <script>
document.addEventListener('DOMContentLoaded', function () {
    const container = document.getElementById('videoList');

    axios.get('http://43.136.85.99:3008/video/list')
        .then(function (res) {
            if (res.data.code === 666 && res.data.msg === 'success') {
                const list = res.data.data;

                let htmlStr = '';
                for (let i = 0; i < list.length; i++) {
                    const item = list[i];

                    htmlStr += `
                        <a href="video-x.html?id=${item.id}" class="mb-20">
                            <div class="rel">
                                <img src="${item.poster}" alt="${item.title}" class="w100p">
                                <p class="f16 abs pl-10 fw-700" style="top: 10px; color: white; line-height: 1.5;">${item.desc}</p>
                            </div>
                            <div class="flex aic jc-sb pl-10 pr-10" style="height: 45px;">
                                <div class="left flex aic fg1">
                                    <img src="${item.authorAvatar}" alt="" style="height: 30px;width: 30px;margin-right: 5px;">
                                    <span>${item.authorName}</span>
                                </div>
                                <div class="right flex aic fg1 jc-sb f20">
                                    <i class="iconfont icon-dianzan">${item.likes || 0}</i>
                                    <i class="iconfont icon-pinglun">${item.comments || 0}</i>
                                    <i class="iconfont icon-zhuanfa">${item.shares || 0}</i>
                                </div>
                            </div>
                        </a>
                    `;
                }

                container.innerHTML = htmlStr;
            } else {
                container.innerHTML = '<p class="text-center mt-20">暂无视频数据</p>';
            }
        })
        .catch(function (error) {
            console.error('请求失败:', error);
            container.innerHTML = '<p class="text-center mt-20">加载视频失败</p>';
        });
});
</script>
</body>
</html>